// ==========================================================================
// Dropdown menu mixin
// Turn a list into a dropdown menu
// ==========================================================================

@mixin dropdown-menu {
	display: none;
	background: var( --color-surface );
	float: none;
	line-height: 46px;
	min-width: 220px;
	overflow: visible;
	padding: 0;
	position: absolute;
	width: auto;
	z-index: 1;
	box-sizing: border-box;
	box-shadow: 0 0 2px rgba( 0, 0, 0, 0.15 ), 0 3px 8px rgba( 0, 0, 0, 0.1 );

	&::after {
		border: 6px solid transparent;
		border-bottom-color: var( --color-border-inverted );
		content: ' ';
		height: 0;
		position: absolute;
		top: -12px;
		left: 73px;
		width: 0;
	}

	li {
		display: block;
		float: none;

		a,
		a.selected {
			border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
			color: var( --color-primary );
			display: block;
			float: none;
			height: auto;
			margin: 0;
			padding: 0 14px;
			text-align: left;

			&:hover {
				border-bottom: 1px solid rgba( 0, 0, 0, 0.1 );
				background: none; // Remove inherited background color
				color: var( --color-link-dark );
				box-shadow: none; // Remove inherited box shadow
			}
		}

		a.selected {
			color: var( --color-text );
		}

		&:last-child a {
			border-bottom: none; // Last child in the dropdown doesn't need a bottom border
		}
	}
}
